<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>18 侧边栏横幅效果</title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    #aside {
        position: absolute;
        top: 200px;
        left: 0;
        width: 300px;
    }

    #aside img {
        width: 100%;
    }
    </style>
</head>

<body style="height: 5000px;">
    <div id="aside">
        <img src="images/aside.png" alt="">
    </div>
    <script src="js/myAnimation2.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    window.onload = function() {
        // 1.获取标签
        var aside = document.getElementById('aside');
        // 2.获取广告的偏移量
        var aside_top = aside.offsetTop;
        window.onscroll = function() {
            // 3.获取页面滚动的高度
            var docScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            startAnimation(aside, { "top": docScrollTop + aside_top });
        }
    }
    </script>
</body>

</html>